// 主题名
$name: 'yb';
// 主色
$color: #00bcd4; 
// range条颜色
$backBar: #eee;

.slider-container {
  width: 300px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  .back-bar {
    height: 10px;
    position: relative;
    .selected-bar {
      position: absolute;
      height: 100%;
    }
    .pointer {
      position: absolute;
      width: 10px;
      height: 10px;
      background-color: red;
      cursor: col-resize;
      opacity: 1;
      z-index: 2;
      &.last-active {
        z-index: 3;
      }
    }
    .pointer-label {
      position: absolute;
      top: -17px;
      font-size: 8px;
      background: white;
      white-space: nowrap;
      line-height: 1;
    }
    .focused {
      z-index: 10;
    }
  }
  .clickable-dummy {
    cursor: pointer;
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 1;
  }
  .scale {
    top: 2px;
    position: relative;
    span {
      position: absolute;
      height: 5px;
      border-left: 1px solid #999;
      font-size: 0;
    }
    ins {
      font-size: 9px;
      text-decoration: none;
      position: absolute;
      left: 0;
      top: 5px;
      color: #999;
      line-height: 1;
    }
  }
  &.slider-readonly {
    .clickable-dummy,
    .pointer {
      cursor: auto;
    }
  }
}

.theme-#{$name} {
  margin: 10px 0 20px;
  .back-bar {
    height: 10px;
    border-radius: 4px;
    background-color: $backBar;
    .selected-bar {
      border-radius: 4px;
      background-color: $color;
    }
    .pointer {
      box-sizing: border-box;
      width: 20px;
      height: 20px;
      top: -5px;
      background-color: #fff;
      border: 5px solid $color;
      border-radius: 20px;
      cursor: col-resize;
    }
    .pointer-label {
      color: #999;
    }
    .focused {
      color: #333;
    }
  }
  .scale {
    span {
      border-left: none;
    }
    ins {
      white-space: nowrap;
      color: #999;
    }
  }
}